<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
    <title>REWORK - Responsive HTML Template Preview - Themeforest</title>
    
    <meta name="description" content="" />
    <meta name="author" content="" />
    
    <link rel="stylesheet" href="./css/style.css" media="screen" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
    <link rel="stylesheet" href="./css/flexslider.css" media="screen" />

    <script src="./js/jquery-1.7.2.min.js"></script>
    <script src="./js/jQuery.BlackAndWhite.min.js"></script>
    <script src="./js/jquery.easing-1.3.min.js"></script>
    <script src="./js/jquery.flexslider-min.js"></script>
    <script src="./js/jquery.isotope.min.js"></script>
    <script src="./js/jquery.jcarousel.min.js"></script>
    <script src="./js/jquery.touchSwipe.min.js"></script>
    <script src="./js/respond.min.js"></script>
    <script src="./js/selectnav.min.js"></script>
    <script src="./js/custom.js"></script>
    <script type="text/javascript" src="http://rework.reworkmedia.net/[JS library]"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
      <script type="text/javascript" src="./js/selectivizr-min.js"></script>
      <noscript><link rel="stylesheet" href="http://rework.reworkmedia.net/[fallback css]" /></noscript>
    <![endif]-->

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-32209063-3']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<!-- Main Container -->
<div id="body-wrapper">

    <!-- Header -->
    <div id="header" class="container clearfix">

        <a href="./index.html" id="logo"><img src="./images/logo.png" alt="" /></a>

        <!-- Navigation -->
        <ul id="navigation">
            <li>
                <a href="./index.html">Home</a>
                <ul>
                    <li><a href="./homepage_v2.html">Simple Version</a></li>
                </ul>
            </li>
            <li class="current">
                <a href="./about.html">Features</a>
                <ul>
                    <li><a href="./about.html">About Us</a></li>
                    <li><a href="./services.html">Services</a></li>
                    <li><a href="./pricing_tables.html">Pricing Tables</a></li>
                    <li><a href="./shortcodes.html">Third Level Item<i></i></a>
                        <ul>
                            <li><a href="./shortcodes.html">This is a simple example</a></li>
                            <li><a href="./shortcodes.html">Of the third level</a></li>
                            <li><a href="./shortcodes.html">Navigation item</a></li> 
                        </ul>
                    </li>
                    <li><a href="./shortcodes.html">Shortcodes</a></li>
                </ul>
            </li>
            <li>
                <a href="./blog.html">Blog</a>
                <ul>
                    <li><a href="./blog_post.html">Single Post</a></li>
                    <li><a href="./blog_v2.html">Alternative Version</a></li>
                </ul>
            </li>
            <li>
                <a href="./portfolio_4_col.html">Portfolio</a>
                <ul>
                    <li><a href="./portfolio_2_col.html">2 Columns</a></li>
                    <li><a href="./portfolio_3_col.html">3 Columns</a></li>
                    <li><a href="./portfolio_4_col.html">4 Columns</a></li>
                    <li><a href="./portfolio_details.html">Single Project</a></li>
                    <li><a href="./portfolio_v2.html">Alternative Version</a></li>
                </ul>
            </li>
            <li>
                <a href="./contact.html">Contact</a>
            </li>
        </ul>
        <!-- /Navigation -->
        
    </div>
    <!-- /Header -->


    <!-- Content -->
    <div id="content" class="container clearfix">

        <h1 class="page-title-inner"><span class="section-title">Shortcodes</span></h1>

        <!-- Buttons -->
        <div class="shortcodes one-fourth">
            <h5>Buttons</h5>
            <p><input type="button" value="Button" class="red" /></p>
            <p><input type="button" value="Button" class="yellow" /></p>
            <p><input type="button" value="Button" class="black" /></p>
            <p><input type="button" value="Button" class="gray" /></p>
        </div>
        <!-- /Buttons -->

        <!-- Accordion -->
        <div class="shortcodes one-fourth">
            <h5>Accordion</h5>
            <div class="accordion-button first" id="open"><a href="./shortcodes.html">Website Design</a></div>
            <div class="accordion-content">
                Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
            </div>
            <div class="accordion-button"><a href="./shortcodes.html">Website Development</a></div>
            <div class="accordion-content">
                Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
            </div>
            <div class="accordion-button"><a href="./shortcodes.html">Content Management Systems</a></div>
            <div class="accordion-content">
                Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
            </div>
            <div class="accordion-button"><a href="./shortcodes.html">E-Commerce</a></div>
            <div class="accordion-content">
                Lorem ipsum dolor sit amet nec, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
            </div>
        </div>
        <!-- /Accordion -->

        <!-- Tabs -->
        <div class="shortcodes one-half last">
            <h5>Tabs</h5>
            <ul id="tabs">
                <li class="active"><a href="#tab1">First</a></li>
                <li><a href="#tab2">Second</a></li>
                <li><a href="#tab3">Third</a></li>
            </ul>
            <div id="tabs_content_container">
                <div id="tab1" class="tab-content">
                    Phasellus adipiscing euismod tristique. Vestibulum non elit vitae enim interdum aliquam sed eget lacus. Phasellus egestas augue sed augue accumsan vitae volutpat massa elementum. Nulla interdum malesuada aliquet. Aliquam vitae dolor vel odio volutpat tempor a a metus.
                </div>
                <div id="tab2" class="tab-content">
                    Donec vitae lacus sed risus accumsan consectetur ut a ligula. Etiam vitae nisi diam, in rutrum dui. In facilisis, erat sed laoreet aliquet, mauris urna placerat enim, eget varius nulla lacus ut erat. Mauris faucibus orci ac turpis facilisis et tempus metus venenatis. Pellentesque ornare, risus et vulputate mollis, massa nulla aliquam neque, sed hendrerit orci quam eget ante.
                </div>
                <div id="tab3" class="tab-content">
                    Nam ultricies dolor eu velit varius scelerisque. Vestibulum in lacus in felis pretium feugiat non sed elit. Duis pretium, urna sed pellentesque tincidunt, neque massa imperdiet nisi, sed cursus leo magna pretium elit.
                </div>
            </div>
        </div>
        <!-- /Tabs -->

        <div class="clear"></div>
        <hr class="h80 shortcodes" />

        <!-- Alert Boxes -->
        <div class="shortcodes one-fourth">
            <h5>Alert Boxes</h5>
            <p class="success"><strong>Success!</strong> You did it.</p>
            <p class="notice"><strong>Notice!</strong> Please edit this.</p>
            <p class="warning"><strong>Warning!</strong> Change and try again.</p>
            <p class="error"><strong>Error!</strong> Please fill in all the fields.</p>
        </div>

        <div class="shortcodes one-half">
            <h5>Blockquote</h5>
            <blockquote>
                Phasellus adipiscing euismod tristique. Vestibulum non elit vitae enim interdum aliquam sed eget lacus. Phasellus egestas augue sed augue accumsan vitae volutpat massa elementum. Nulla interdum malesuada aliquet. Aliquam vitae dolor vel odio volutpat tempor a a metus.
                <span class="person">Charles Darrow, <span class="accent">Rework</span></span>
                <span class="corner"></span>
            </blockquote>
        </div>
        <!-- /Alert Boxes -->

        <!-- List Styles -->
        <div class="shortcodes one-fourth last">
            <h5>List Styles</h5>
            <ul class="check">
                <li>Conceptualization</li>
            </ul>
            <ul class="check-bold">
                <li>Website Development</li>
            </ul>
            <ul class="arrow">
                <li>Content Management Systems</li>
            </ul>
            <ul class="arrow-bold">
                <li>E-Commerce</li>
            </ul>
            <ul class="square">
                <li>Large Format</li>
            </ul>
            <ul class="circle">
                <li>Sales Promotions</li>
            </ul>
        </div>
        <!-- /List Styles -->

    </div>
    <!-- /Content -->

    <!-- Footer -->
    <div id="footer">
        <div class="container clearfix">

            <!-- About -->
            <div class="one-fourth">
                <a href="./index.html" class="logo"><img src="./images/logo_footer.png" alt="" /></a>
                <p>Proin fermentum sollicitudin ante, sed tempor eros molestie id. Donec volutpat odio eu mi imperdiet nec laoreet diam venenatis. Nunc ac purus aliquet mauris interdum accumsan.</p>
            </div>
            <!-- /About -->

            <!-- Twitter Feed -->
            <div class="one-fourth">
                <h5>Latest Tweets</h5>
                <div class="twitter-feed">
                    <p>
                        12 Outstanding Videos That Make Good Creative Use of AudioJungle Tracks <a href="./shortcodes.html">http://t.co/7USabnpS</a>
                        <span class="tweet-time">7 hours ago</span>
                    </p>
                    <p>
                        Farewell Envato – I Will Miss You! <a href="./shortcodes.html">http://t.co/ommJTJgp</a>
                        <span class="tweet-time">Sep 5 (1 day ago)</span>
                    </p>
                </div>
            </div>
            <!-- /Twitter Feed -->

            <!-- Contacts -->
            <div class="one-fourth">
                <h5>Contact Details</h5>
                <p class="address">3200 Sepulveda Blvd. <br />Manhattan Beach, CA 90266, USA</p>
                <p class="phone">Phone: (415) 124-5678 <br />Fax: (415) 124-5678</p>
                <p class="email">support@reworkmedia.com</p>
            </div>
            <!-- /Contacts -->

            <!-- Photo Stream -->
            <div class="one-fourth last">
                <h5>Photo Stream</h5>
                <ul class="photo-stream">
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_01.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_02.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_03.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_04.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_05.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_06.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_07.jpg" alt="" /></a></li>
                    <li><a href="./shortcodes.html"><img src="./images/content/photo_stream_08.jpg" alt="" /></a></li>
                </ul>
            </div>
            <!-- /Photo Stream -->

        </div>

        <div class="clear"></div>

        <div class="info container clearfix">

            <!-- Copyright -->
            <ul class="copyright">
                <li>© 2012 REWORK MEDIA. All rights reserved</li>
                <li><a href="./shortcodes.html">Legal Notice</a></li>
                <li><a href="./shortcodes.html">Terms & Conditions</a></li>
            </ul>
            <!-- /Copyright -->

            <!-- Social Links -->
            <ul class="social-links">
                <li class="twitter"><a href="./shortcodes.html">Twitter</a></li>
                <li class="facebook"><a href="./shortcodes.html">Facebook</a></li>
                <li class="linkedin"><a href="./shortcodes.html">LinkedIn</a></li>
                <li class="digg"><a href="./shortcodes.html">Digg</a></li>
                <li class="vimeo"><a href="./shortcodes.html">Vimeo</a></li>
            </ul>
            <!-- /Social Links -->

        </div>
    </div>
    <!-- /Footer -->

</div>
<!-- /Main Container -->

</body>
</html>